<template>
  <div class="res-com">
    <h1 class="res-title">资源评论</h1>
    <textarea class="area" placeholder="下载资源后方可评论" v-model="content"></textarea>
    <Star v-model="star" class="star"/>
    <button class="btn" type="button" @click="commentHandler">提交评论</button>
  </div>
</template>

<script>

import Star from './Star.vue' ;

export default {
  components: {
    Star,
  },
  props: {
    resId: { // 要评论的资源ID, 必传
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      star: 5,
      content: "",
    }
  },
  emits: ["refresh-comment"],
  methods: {
    commentHandler() {
      this.$api.saveResourceComments({resId: this.resId, star: this.star, content: this.content}).then(ret=> {
         if (ret.status) {
            // 通知父组件、刷新评论内容
           this.$emit("refresh-comment") ;
           this.$toastr.success(ret.message) ;
           this.content = "" ;
           this.star = 5;
         }else {
           for (let err in ret.error) {
             this.$toastr.error(ret.error[err]);
           }
           this.$toastr.error(ret.message);
         }
      })
    }
  }
}

</script>

<style scoped>
.res-com {
  position: relative;
  left: 5px;
  right: 5px;
}

.res-com h1 {
  background: url(@/assets/images/comment.png) no-repeat 75px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 400;
}

.res-com .area {
  width: 100%;
  height: 150px;
  border: 1px solid #999aaa;
  border-radius: 4px;
  padding: 5px 10px;
  resize: vertical;
  box-sizing: border-box;
}

.res-com .star {
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  cursor: pointer;
}

.res-com .btn {
  width: 100px;
  height: 35px;
  background-color: #444555;
  color: #fff;
  border-radius: 34px;
  border: none;
  text-align: center;
  cursor: pointer;
}

.res-com .btn:hover {
  background-color: #696a77;
}
</style>